<template>
    <div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;">
        <div class="modal-background"
             style="position: absolute;z-index: 999;;opacity:0;background-color: #000;background-attachment: fixed; width: 100%;height: 100%;"></div>
        <div style="width: 100%;height: 100%;justify-content: center;display: flex;align-items: center;position: absolute;z-index: 1000;color: #ffffff;">
            <div>
                <div style="text-align: center;background-color: white;color: #777;border-radius: 8px;padding: 8px;border: 1px solid #13758c;">
                    <div style="padding: 8px;background: #13758c;color: #ffffff;border-radius: 5px;opacity:0.8;">
                        接受转接的同事
                    </div>
                    <div>
                        <div style="height: 240px;width: 240px;overflow-y: auto;">
                            <template v-if="workmates == null">
                                <i style="margin-top: 8px;" class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            </template>
                            <template v-else>
                                <div v-if="workmates.length == 0">暂时没有可供转接的同事</div>
                                <ul v-else style="list-style: none;padding: 0;">
                                    <li class="workmate-item" @click="selected(workmate.user)" v-for="workmate in workmates">{{workmate.user.userName}}
                                        <span style="font-size: 12px;"><template
                                                v-if="workmate.userState == 0">在线</template><template
                                                v-else>离开</template></span></li>
                                </ul>
                            </template>
                        </div>
                        <textarea v-model="remark" style="width: 100%;height: 50px;resize: none;outline: none;border: 1px solid #d3d3d3;padding: 8px;margin-top: 16px;" placeholder="转接说明"></textarea>
                    </div>
                    <div style="display: flex;margin-top: 8px;">
                        <button class="btn btn-info btn-block" @click="cancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        data(){
            return {
                workmates: null,
                remark:''
            }
        },
        mounted: function () {
            const that = this;
            $.post('/workmate/list', {}, function (data) {
                that.workmates = data;
            })
        },
        props: ["conversation"],
        methods: {
            cancel: function () {
                this.$emit('closeTransferList');
            },
            selected: function (user) {
                this.as.transfer(this.conversation.id,user.id,this.remark);
                this.$router.go(0)
            }
        }
    }
</script>
<style scaped>
    .workmate-item {
        cursor: pointer;
        padding: 8px 0;
        border-bottom: 1px solid #dfdfdf
    }
    .workmate-item:hover {
        color: #6aa8df;
        border-bottom: 1px solid #6aa8df
    }
</style>